<!-- eslint-disable max-len -->
<template>
  <!-- <div> -->
    <s-table
      ref="flowConfigTable"
      class="h100"
      :columns="columns"
      :data="loadData"
      :showPagination="true"
      rowKey="key"
      :scrollX="1200"
      wrapRef="ant-tabs-content"
    >
      <template #applycontent="text, record">
        <a @click="handleSeeDetail(record)">
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            :text="record.instanceName">
          </table-ellipsis>
        </a>
      </template>
      <template slot="instanceStatus" slot-scope="text, record">
        <table-ellipsis
          :tableEllipsisIsTurnLine="false"
          :text="record.instanceStatus?$options.filters.DictLabelFilter(record.instanceStatus,statusEnumArr) : '_'"
        >
        </table-ellipsis>
      </template>
      <template #businessType="text, record">
        <table-ellipsis
          :tableEllipsisIsTurnLine="false"
          :text="record.businessName">
        </table-ellipsis>
      </template>
      <template #cancelType="text, record">
        <table-ellipsis
          :text="record.cancelType?$options.filters.DictLabelFilter(record.cancelType,cancelTypeEnumArr) : '_'"
        >
        </table-ellipsis>
      </template>
      <template slot="endTime" slot-scope="text">
        <table-ellipsis :text="text ? $options.filters.moment(text) : '_'">
        </table-ellipsis>
      </template>
      <template slot="auditComment" slot-scope="text">
        <table-ellipsis :text="text ? text : '_'">
        </table-ellipsis>
      </template>
      <template slot="createTime" slot-scope="text">
        <table-ellipsis
          :tableEllipsisIsTurnLine="false"
          :text="text ? $options.filters.moment(text) : '_'">
        </table-ellipsis>
      </template>
      <template #operation="text">
        <span class="set-margin">
          <auth-button type="primary" :ghost="true" size="small" :auth="todoPerms.apply.audit" @click="clickRowOperation('auditProcess',text)"><a-icon type="apartment" />{{ $t('view') }}</auth-button>
        </span>
        <span class="set-margin" v-if="text.instanceStatus===10 && text.businessCode!=='user_register'">
        <auth-button type="danger" :ghost="true" size="small" :auth="todoPerms.apply.urge" @click="clickRowOperation('urge',text)"><a-icon type="shake" />{{ $t('urge') }}</auth-button>
        </span>
        <span class="set-margin" v-if="text.instanceStatus===10&&(text.cancelType==='10'||text.hiddenCancel===0) && text.businessCode!=='user_register'">
        <auth-button type="danger" :ghost="true" size="small" :auth="todoPerms.apply.withdraw" @click="clickRowOperation('revoke',text)"><a-icon type="minus-circle" />{{ $t('withdraw') }}</auth-button>
        </span>
        <!-- <span class="set-margin">
          <a-icon type="user-add" />
          <a @click="clickRowOperation('countersign',text)">{{ $t('countersign') }}</a>
        </span>
        <span class="set-margin">
          <a-icon type="edit" />
          <a @click="clickRowOperation('cc',text)">{{ $t('cc') }}</a>
        </span> -->
        <!-- 补充 -->
        <span  class="set-margin" v-if="text.instanceStatus===30||text.instanceStatus===40||text.instanceStatus===50">
          <auth-button type="primary" :ghost="true" size="small" @click="editFailedForm(text)"><i class="iconfont icon-xiugai"/>{{ $t('edit') }}</auth-button>
        </span>
         <span  class="set-margin" v-if="text.instanceStatus===70">
          <auth-button type="danger" :ghost="true" size="small" :auth="todoPerms.apply.downShelves"  @click="xj(text)"><i class="iconfont icon-xiajia"/>{{ $t('xj') }}</auth-button>
        </span>
         <span  class="set-margin" v-if="text.instanceStatus===80">
          <auth-button type="primary" :ghost="true" size="small" :auth="todoPerms.apply.upShelves" @click="sj(text)"><i class="iconfont icon-shangjia"/>{{ $t('sj') }}</auth-button>
        </span>
         <span v-if="(text.instanceStatus===30||text.instanceStatus===40||text.instanceStatus===80||text.instanceStatus===100) && !text.businessCode=='user_register'">
          <auth-button type="danger" :ghost="true" size="small" :auth="todoPerms.apply.repealInstance"  @click="fz(text)"> 
            <a-icon type="close-circle" theme="filled"  :style="text.instanceStatus===30||text.instanceStatus===40||text.instanceStatus===80||text.instanceStatus===100?{color:'red'}:{}"/>{{ $t('repeal') }}
            </auth-button>
        </span>
      </template>
    </s-table>
  <!-- </div> -->
</template>
<script>
import { mapState } from 'vuex'
import STable from '@/components/Table/index1'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { allApplyColumns, statusEnumArr, cancelTypeEnumArr } from '../config/list'
import { todoPerms } from '@/config/permission/index'
import AuthButton from '@/components/AuthButton'

export default {
  components: {
    STable,
    tableEllipsis,
    AuthButton
  },
  props: {
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.myApply.queryParamsAll
    })
  },
  data () {
    return {
      selectedRowKeys: [],
      columns: allApplyColumns,
      statusEnumArr,
      todoPerms,
      cancelTypeEnumArr
    }
  },
  beforeDestroy () {
    // 销毁组件之前清空搜索条件
    this.$store.commit('resetAllApplyQueryParams')
  },
  methods: {
     // 编辑文件加工失败的表单
    editFailedForm (data) {
      if(data.businessCode=='user_register'){
        this.$router.push({ path: '/todo/applicationContent', query: {
          id: data.instanceId,
          swcode: data.businessCode,
          key: data.businessKey,
          // 是从我的申请跳转过去还是从我的审核跳转过去，会影响底部的操作信息栏加载
          aorr: 'a',
          status: data.instanceStatus,
          from:'editRegister',
          endTime:data.endTime
          } 
        })
      } else if(data.businessCode=='sw_repo_audit'){
        this.$router.push({ path: '/mc/editAgain', query: { originalId: data.businessKey, t: 5, aorr: 'a', from:'applicationAction', status:data.instanceStatus, id:data.instanceId } })
      }
    },
     // 上架表单
    sj (data) {
      const that = this
      const h = this.$createElement
      this.$confirm({
        title: that.$t('onshelfTip'),
        content: h('div', [h('b',that.$t('onshelfContent') ), h('p', that.$t('onshelfContent2'))]),
        onOk () {
          that.$api.listingForm({ id: data.businessKey * 1 }).then(
            () => {
              that.refreshData()
            }
          )
        },
        onCancel () { }
      })
    },
    // 下架表单
    xj (data) {
      const that = this
      const h = this.$createElement
      this.$confirm({
        title: that.$t('offshelfTip'),
        content: h('div', [h('b',that.$t('offshelfContent') ), h('p', that.$t('offshelfContent2'))]),
        onOk () {
          that.$api.offshelfForm({ id: data.businessKey * 1 }).then(
            () => {
              that.refreshData()
            }
          )
        },
        onCancel () { }
      })
    },
    fz(data){
      const that = this
      const h = this.$createElement
      this.$confirm({
        title: that.$t('repealTip'),
        content: h('div', [h('b',that.$t('repealContent') ), h('p', that.$t('repealContent2'))]),
        onOk () {
          that.$api.repealForm({ instanceId: data.instanceId }).then(
            () => {

              that.refreshData()
            }
          )
        },
        onCancel () { }
      })
    },
    // 加载表格数据
    loadData (parameter) {
      const vm = this
      const JnqueryParam = JSON.parse(JSON.stringify(vm.queryParams))
      // eslint-disable-next-line no-restricted-syntax
      for (const key in JnqueryParam) {
        if (JnqueryParam[key] === '') {
          JnqueryParam[key] = undefined
        }
        if (JnqueryParam[key] instanceof Array) {
          JnqueryParam[key] = JnqueryParam[key].toString()
        }
      }
      return this.$api.getMyApplyList({ ...parameter, ...JnqueryParam })
    },
    // 更新表格数据
    refreshData (isToFirstPage = true) {
      let obj = null
      if (isToFirstPage) {
        obj = { current: 1 }
      }
      this.$refs.flowConfigTable.loadData(obj)
    },
    // 点击跳转申请内容详情
    handleSeeDetail (data) {
      this.$router.push({
        path: '/todo/applicationContent',
        query: {
          id: data.instanceId,
          swcode: data.businessCode,
          key: data.businessKey,
          // 是从我的申请跳转过去还是从我的审核跳转过去，会影响底部的操作信息栏加载
          aorr: 'a',
          status: data.instanceStatus }
      })
    },
    // 点击操作按钮
    clickRowOperation (type, data) {
      this.$emit('operateRow', [type, data])
    }
  }
}
</script>
<style lang="less" scoped>
.set-margin {
  margin-right: 12px;
}
::v-deep .ant-table-tbody > tr > td {
  white-space: break-spaces;
}
</style>
